import React, { useState, useEffect } from 'react';
import { StatisticCard } from '@ant-design/pro-card';
import ProCard from '@ant-design/pro-card';
import { request, Access, useAccess } from 'umi';
import FileListComponent from './components/FileListComponent';
import FileApprovalList from './components/FileApprovalList';
const { Divider } = StatisticCard;

import { api } from '@/global';
export default () => {
  const [data, SetData] = useState<any>();
  const access = useAccess();
  const initData = async () => {
    const result = await request(api.getPrivateFileInfoMsg);
    SetData(result.data);
  };

  useEffect(() => {
    initData();
  }, []);

  return (
    <>
      <Access key="fileList2" accessible={access.normalButtonFilter('PRIVATE_FILE:SELECT')}>
        <StatisticCard.Group>
          <StatisticCard
            statistic={{
              title: '全部文件',
              value: data?.all,
            }}
          />
          <Divider />
          <StatisticCard
            statistic={{
              title: '上传文件',
              value: data?.online,
              status: 'success',
            }}
          />
          <StatisticCard
            statistic={{
              title: '审批中',
              value: data?.approver,
              status: 'processing',
            }}
          />
          <StatisticCard
            statistic={{
              title: '审批失败',
              value: data?.refult,
              status: 'error',
            }}
          />
        </StatisticCard.Group>
      </Access>
      <Access key="fileList" accessible={access.normalButtonFilter('PRIVATE_FILE:SELECT')}>
        <ProCard style={{ marginTop: '10px' }}>
          <FileListComponent key={'filelist'} />
        </ProCard>
      </Access>
      <Access key="fileList" accessible={access.normalButtonFilter('PRIVATE_FILE:APPROVAL')}>
        <ProCard style={{ marginTop: '10px' }}>
          <FileApprovalList key="fileapproval" />
        </ProCard>
      </Access>
    </>
  );
};
